<template>
  <!-- 添加或修改互市挂车备案对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    @close="close"
    class="self-dialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="118px" label-position="right" class="flex-form"
             size="small">
      <el-form-item label="主管海关" prop="mainPort">
        <el-select
          :disabled="this.dialogType=='editDecl'"
          v-model.trim="form.mainPort"
          placeholder="请选择主管海关"
          filterable
          clearable
        >
          <el-option v-for="(item, index) in customsList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="场所编码" prop="fieldCode">
        <el-select v-model.trim="form.fieldCode" placeholder="请选择场所" :disabled="this.dialogType=='editDecl'" filterable clearable>
          <el-option
            v-for="dict in fieldOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="车架号码" prop="frameNo">
        <el-input v-model.trim="form.frameNo" placeholder="请输入车架号码"/>
      </el-form-item>
      <el-form-item label="挂车牌号" prop="trailerLicenseNo">
        <el-input v-model.trim="form.trailerLicenseNo" :disabled="this.dialogType=='editDecl'" placeholder="请输入挂车牌号"/>
      </el-form-item>

      <el-form-item label="挂车注册地" prop="trailerRegPlace">
        <el-select
          v-model.trim="form.trailerRegPlace"
          placeholder="请选择挂车注册地"
        >
          <el-option v-for="(item, index) in dict.type.sw_vehicle_reg_place" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="挂车颜色" prop="trailerColor">
        <el-select
          v-model.trim="form.trailerColor"
          placeholder="请选择挂车颜色"
          filterable
          clearable
        >
          <el-option v-for="(item, index) in dict.type.motor_vehicles_color" :key="index" :label="item.value+'-'+item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="挂车备案类别" prop="trailerClassFlag">
        <el-select
          v-model.trim="form.trailerClassFlag"
          placeholder="请选择挂车备案类别"
          filterable
          clearable
        >
          <el-option v-for="(item, index) in dict.type.road_trailer_type" :key="index" :label="item.value+'-'+item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="挂车重量" prop="trailerWt">
        <el-input-number v-model.trim="form.trailerWt" :min="0" label="请输入挂车重量"></el-input-number>
      </el-form-item>

      <!-- 占位用 -->
      <!-- <el-form-item label="" prop=""></el-form-item> -->

      <el-form-item label="车厢照片" prop="veConPic">
        <fileUpload v-model="form.veConPic" :fileType="fileType" :fileSize="1" :limit="1" />
      </el-form-item>

      <el-form-item label="挂车牌号图片" prop="trailerLicenseNoPic">
        <fileUpload v-model="form.trailerLicenseNoPic" :fileType="fileType" :fileSize="1" :limit="1" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getRoadTrailer, addRoadTrailer, updateRoadTrailer, updateDeclRoadTrailer} from "@/api/swdecl/roadTrailer";

export default {
  name: "RoadTrailer-addEdit",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {
      },
    },
    customsList: {
      type: Array,
      default: () => []
    },
    fieldOptions: {
      type: Array,
      default: () => []
    },
    dict: {}
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      // 标题
      title: "新增",
      fileType:['png', 'jpg', 'jpeg'],
      baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      // 表单参数
      form: {
        id: null,
        mainPort: null,
        trailerLicenseNo: null,
        trailerRegPlace: null,
        frameNo: null,
        trailerWt: null,
        trailerColor: null,
        fieldCode: null,
        veConPic: null,
        proposer: null,
        proposeTime: null,
        proposeStatus: null,
        responseTime: null,
        responseCode: null,
        responseText: null,
        responseType: null,
        trailerClassFlag: null,
        updateBy: null,
        updateTime: null,
        eportId: null,
        trailerLicenseNoPic: null,
        operationType: null,
        createTime: null,
        createBy: null,
        identifyIdNo: null

      },
      // 互市挂车备案表格数据
      roadTrailerList: [],
      // 表单校验
      rules: {
        mainPort: [
          {required: true, message: "主管海关代码不能为空", trigger: "blur"}
        ],
        frameNo: [
          {required: true, message: "车架号不能为空", trigger: "blur"}
        ],
        trailerLicenseNo: [
          {required: true, message: "挂车牌号不能为空", trigger: "blur"}
        ],
        trailerRegPlace: [
          {required: true, message: "挂车注册地不能为空", trigger: "blur"}
        ],
        trailerColor: [
          {required: true, message: "挂车颜色不能为空", trigger: "blur"}
        ],
        veConPic: [
          {required: true, message: "车厢照片不能为空", trigger: "blur"}
        ],
        trailerClassFlag: [
          {required: true, message: "挂车备案类别(1：进出境挂车，2：来往港澳挂车)不能为空", trigger: "blur"}
        ],
        trailerLicenseNoPic: [
          {required: true, message: "挂车牌号图片不能为空", trigger: "blur"}
        ],
      }
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.loadDetail();
        } else if (this.dialogType == "detail") {
          this.title = "详情";
          this.loadDetail();
        }else if (this.dialogType == "editDecl"){
          this.title = "变更申报";
          this.loadDetail();
        }
      });
    },
    close() {
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },

    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getRoadTrailer(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let params = {
            ...this.form,
          };
          if (this.dialogType == "add") {
            addRoadTrailer(this.form).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "edit") {
            params.id = this.rowData.id;
            updateRoadTrailer(this.form).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }else if (this.dialogType == "editDecl"){
            params.id = this.rowData.id;
            updateDeclRoadTrailer(this.form).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("变更申报成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
